<template>
    <div class="SHZY-common-layout bg-color">
        <div class="SHZY-common-layout-center">
            <el-scrollbar style="overflow-x: hidden;">
                <div class="flex h-full">
                    <div class="flex flex-column flex-1 mx-3 bg-gray p-10">
                        <div class="flex justify-between my-10 align-center">
                            <strong>未分配</strong>
                            <!-- <span class="circle bg-blue">{{ undistributed.length }}</span> -->
                            <el-tag size="medium">{{ undistributed.length }}</el-tag>
                        </div>
                        <div :class="handleClass(item)" v-for="(item, index) in undistributed" :key="index">
                            <!-- <div class="flex justify-between mb-5 align-center">
                                <span class="font-color-blue ">{{ item.Code }}</span>
                            </div> -->
                            <el-form label-width="85px" label-position="left">
                                <el-form-item label="报检单号：">
                                    <span class="item-label"> {{ item.code }}</span>
                                </el-form-item>
                                <el-form-item label="物料：">
                                    <el-tooltip effect="dark" :content="item.materialCode + ' ' + item.materialDes"
                                        placement="top">
                                        <span class="item-label"> {{ handleContent(item.materialDes + " " +
                                            item.materialCode) }}</span>
                                    </el-tooltip>
                                </el-form-item>
                                <el-form-item label="生产订单：">
                                    <span class="item-label"> {{ item.orderNo }}</span>
                                </el-form-item>
                                <el-form-item label="数量：">
                                    <span class="item-label"> {{ item.productionQty }}</span>
                                </el-form-item>
                                <el-form-item label="报检日期：">
                                    <span class="item-label"> {{ shzy.toDate(item.date, "yyyy-MM-dd HH:mm:ss") }} </span>
                                </el-form-item>
                            </el-form>
                        </div>
                    </div>

                    <div class="flex flex-column flex-1 mx-3 bg-gray p-10">
                        <div class="flex justify-between my-10">
                            <strong>已分配</strong>
                            <!-- <span class="circle bg-blue">{{ allocatedTotal }}</span> -->
                            <el-tag size="medium">{{ allocatedTotal }}</el-tag>
                        </div>
                        <div class="bg-white my-5 radius-10" v-for="(item, index) in allocated" :key="index">
                            <div class="flex justify-between relative px-10">
                                <div class="flex flex-center">
                                    <!-- <i class="icon-ym icon-ym-user icon-size" style="color: #008ACB;"></i> -->
                                    <el-avatar :size="50" :src="define.comUrl + '/api/File/Image/userAvatar/' + item.headIcon"
                                        class="avatar" />&nbsp;
                                    {{ item.employeeName }}
                                </div>
                                <!-- <span class="circle bg-green absolute absolute-site">{{ item.count }}</span> -->
                                <el-tag size="medium">{{ item.count }}</el-tag>
                            </div>
                        </div>
                    </div>

                    <div class="flex flex-column flex-1 mx-3 bg-gray p-10">
                        <div class="flex justify-between my-10">
                            <strong>已完成</strong>
                            <!-- <span class="circle bg-blue">1</span> -->
                            <el-tag size="medium">{{ finishTotal }}</el-tag>
                        </div>
                        <div class="bg-white my-5 radius-10" v-for="(item, index) in finishList" :key="index">
                            <div class="flex justify-between relative px-10">
                                <div class="flex flex-center">
                                    <!-- <i class="icon-ym icon-ym-user icon-size" style="color: #008ACB;"></i> -->
                                    <el-avatar :size="50" :src="define.comUrl + '/api/File/Image/userAvatar/' + item.headIcon"
                                        class="avatar" />&nbsp;
                                    {{ item.employeeName }}
                                </div>
                                <!-- <span class="circle bg-green absolute absolute-site">{{ item.count }}</span> -->
                                <el-tag size="medium">{{ item.count }}</el-tag>
                            </div>
                        </div>
                    </div>


                </div>
            </el-scrollbar>
        </div>
    </div>
</template>


<script>
import { InspectorKanban } from '@/api/q1/business/ipqcInspection'
export default {
    name: "business-ipqcKanbanStatistics",
    data() {
        return {
            undistributed: [],
            allocated: [],
            finishList: [],
            finishTotal: 0,
            allocatedTotal: 0
        }
    },
    created() {
        this.getInspectorKanban()
    },
    methods: {
        handleClass(item) {
            if (item.overdue == 2) {
                return 'bg-white border-left-red p-15 my-5 radius-10'
            } else if (item.overdue == 1) {
                return 'bg-white border-left-yellow p-15 my-5 radius-10'
            } else {
                return 'bg-white border-left-green p-15 my-5 radius-10'
            }

        },
        handleContent(content) {
            if (content.length > 20) {
                return content.substr(0, 20) + "..."
            } else {
                return content
            }
        },
        getInspectorKanban() {
            InspectorKanban().then(res => {
                this.undistributed = res.data.wait
                this.allocated = res.data.list
                this.finishList = res.data.finish
                this.finishList.forEach(item => {
                    this.finishTotal += item.count
                });
                this.allocatedTotal = res.data.total
            })
        }
    }
}
</script>

<style scoped lang="scss">
.flex {
    display: flex;
}

.align-center {
    align-items: center;
}

.flex-center {
    align-items: center;
    justify-content: center;
    color: #606266;
}

.flex-column {
    flex-direction: column;
}

.justify-between {
    justify-content: space-between
}

.flex-1 {
    flex: 1
}

.bg-white {
    background-color: white;
    min-width: 400px;

    .el-form-item {
        margin-bottom: 0px;
    }
}

.border-left-red {
    border-left: 5px solid #ff625c;
}

.border-left-yellow {
    border-left: 5px solid #f9a646;
}

.border-left-green {
    border-left: 5px solid #6dcc51;
}

.border-l {
    border-left: 8px solid;
}

.mx-3 {
    margin: 0px 3px;
}

.bg-gray {
    // background-color: #F0F0F0;
}

.p-10 {
    padding: 10px;
}

.my-10 {
    margin: 10px 0px;
}

.circle {
    border-radius: 50%;
    color: white;
    padding: 5px 9px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.bg-blue {
    background-color: #2DB7F5;
}

.font-color-blue {
    color: #31A8F8;
    font-weight: 600;
}

.border-blue {
    border-color: #2DB7F5;
}

.my-5 {
    margin: 5px 0px;
}

.mb-5 {
    margin-bottom: 5px;
}

.icon-size {
    font-size: 50px;
}

.bg-green {
    background-color: #6ABE39;
}

.relative {
    position: relative;
}

.absolute {
    position: absolute
}

.absolute-site {
    right: 10px;
    top: 10px
}

.px-10 {
    padding: 10px 10px;
}

.p-15 {
    padding: 15px;
}


.h-full {
    height: 100%;
}

.radius-10 {
    border-radius: 10px;
}

.item-label {
    color: #606266;
    font-weight: 500;
}

.item-row {
    margin-top: 5px;
}</style>
